<template>
    <div style="">
        <div>
            <IndexTop></IndexTop>

            <IndexHeader></IndexHeader>
            <br>
            <br>
            <br>
            <br>
            <div style="width: 1450px;margin: 0 auto;display: flex">
                <img class="destination-detail-item-img" fit="cover"
                     style="margin-left: 70px;width:500px;display: block"
                     :src="detail.img"
                     alt="">
                </img>
                <div style="margin-left: 30px;border-bottom: 6px solid #2569A4;height: 60px;width: 700px ">
                    {{detail.name}}
                    <div style="margin-top: 50px">
            <span style="font-size: 16px">有点甜价：<span style="color: #FF6600;font-size: 25px">￥{{detail.sellPrice}}</span>
</span> <span style="margin-left: 10px;color: #999999;text-decoration: line-through">市场价:{{detail.originalPrice}}</span>
                    </div>
                    <div style="display: flex;margin-top: 10px;">
                        <!--                        <div class="canshu"-->
                        <!--                             style="font-size: 15px;border: 1px solid #49B1F5;padding: 0px 6px;color: #49B1F5">五日游-->
                        <!--                        </div>-->
                        <!--                        <div class="canshu"-->
                        <!--                             style="margin-left: 10px;font-size: 15px;border: 1px solid #49B1F5;padding: 0px 6px;color: #49B1F5">-->
                        <!--                            七日游-->
                        <!--                        </div>-->
                        <!--                        <div class="canshu"-->
                        <!--                             style="margin-left: 10px;font-size: 15px;border: 1px solid #49B1F5;padding: 0px 5px;color: #49B1F5;text-align: center">-->
                        <!--                            十四日游-->
                        <!--                        </div>-->
                    </div>
                    <div style="font-size: 15px">
                        剩余票数：{{detail.stock-count}}
                    </div>
                    <div style="display: flex;align-items: center">
                        票：
                        <div @click="sub"
                             style="cursor:pointer;width: 30px ;height: 30px;border: 1px solid #EBEBEB;text-align: center">
                            -
                        </div>
                        <el-input v-model="count" placeholder="0"
                                  style="width: 50px;height: 40px;border: 1px solid #EBEBEB;text-align: center">1
                        </el-input>
                        <div @click="addc"
                             style="cursor:pointer;width: 30px;height: 30px;border: 1px solid #EBEBEB;text-align: center;line-height: 30px">
                            +
                        </div>
                        <div @click="dialogVisible=true"
                             style="cursor:pointer;margin-left: 10px;font-weight: 600;color: #ffffff;background-color: #F63863;text-align: center;padding: 5px 10px ">
                            立即下单
                        </div>
                    </div>
                </div>

            </div>
            <!--                    产品描述-->
            <div class="description" style="width: 1450px;margin: 0 auto;">
                <div style="border: 1px solid #ECE3DE;border-bottom: 0;width: 70px;border-bottom: transparent">
                    商品参数
                </div>
                <div style="width: 100%;border: 1px solid #ECE3DE;padding: 20px 20px">
                    感谢您光临本店,您的满意是我们永恒的追求，售后如有任何问题建议请联系我们，我们将积极妥
                    <p>
                        {{detail.description}}
                    </p>
                    <!--                    <p> 目的地 : 北欧-->
                    <!--                    </p>-->
                    <!--                    <p> 法国+瑞士+意大利+德国10-14日游欧洲年度爆款超3400人出游含卢浮宫门票蒙帕纳斯大厦登顶-->
                    <!--                    </p>-->
                </div>
            </div>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <el-form :model="formEdit" :rules="rulesEdit" ref="formEditRef" label-width="100px">

                <el-dialog
                        title="提示"
                        :visible.sync="dialogVisible"
                        width="30%"
                        :before-close="handleClose">

                    <el-form-item label="共支付：" prop="name">
                        <span style="font-size: 19px;color: #FF6600">{{count*detail.sellPrice}}</span>
                    </el-form-item>
                    <el-form-item label="订单备注：" prop="name">
                        <el-input v-model="orderRemark"></el-input>

                    </el-form-item>

                    <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="pay">确 定</el-button>
  </span>
                </el-dialog>
            </el-form>
            <Foot></Foot>
        </div>

    </div>
</template>

<script>
    import Foot from "../components/bottom/Foot";
    import PurchaseTicketTop from "../components/top/PurchaseTicketTop";
    import IndexHeader from "../components/top/IndexHeader";
    import IndexTop from "../components/top/IndexTop";
    import jwtDecode from 'jwt-decode'

    export default {
        components: {
            PurchaseTicketTop,
            IndexHeader,
            IndexTop,
            Foot
        },
        created() {
            this.getDetailInfo();
        },
        data() {
            return {
                orderRemark: "",
                dialogVisible: false,
                count: 0,
                detail: {}
            }
        },
        methods: {
            async pay() {
                let jwt = localStorage.getItem('token')
                let token = jwtDecode(jwt)
                console.log(token)
                this.dialogVisible = false
                let form = {
                    userId: token.id,
                    productId: this.detail.id,
                    count: this.count,
                    orderRemark: this.orderRemark
                }
                let {data: res} = await this.$http.put('/order/', form)
                if (!token) {
                    this.$message.error('请先登录')
                    return;
                }
                if (res.meta.status === 200) {
                    this.$message.success('下单并支付成功');

                } else {
                    this.$message.error(res.meta.msg);
                }
                this.$message.success('下单并支付成功');
            },
            async getDetailInfo() {
                let id = this.$route.query.id;
                let {data: res} = await this.$http.get('/detail/ticket/' + id)
                console.log(res);
                this.detail = res.data;
            },
            addc() {
                this.count++;
            },
            sub() {
                if (this.count > 0) {
                    this.count--

                } else {
                    this.$message.error('不能为负数')
                }
            },
            async getDetail() {

            }
        },
        name: "PurchaseTicket"
    }
</script>

<style scoped>
    .canshu {
        transition: all 0.5s;
        cursor: pointer;
    }

    .canshu:hover {
        color: #ffffff !important;
        background-color: #49B1F5;
    }
</style>